<template>
  <van-tabs v-model:active="active" @change="tabsChange">
    <van-tab v-for="item, index in tabInfo" :key="index" :title="item.title">
      <li v-for="list in item.info">
        <div class="music-pic">
          <van-image :src="list.album.picUrl" />
        </div>
        <div class="muisc-info van-ellipsis">
          <p class=" van-ellipsis">
            {{ list.musicName }}
            <!-- <span class="font-fu">- {{ list.artists[0].name }}</span> -->
          </p>
          <span class="info font-fu ">{{ list.alias }}</span>
        </div>
        <div class="play">
          <van-icon name="play-circle-o" size="28" />
        </div>
      </li>
    </van-tab>
  </van-tabs>
</template>

<script setup>
import { reactive, toRefs, ref, onMounted } from 'vue'
import { getTopSong } from '@/request/api/musicApi'

let data = reactive({
  active: 0,
  tabInfo: [
    {
      title: '全部',
      type: 0,
      info: ''
    },
    {
      title: '华语',
      type: 7,
      info: ''
    },
    {
      title: '欧美',
      type: 96,
      info: ''
    },
    {
      title: '日本',
      type: 8,
      info: ''
    },
    {
      title: '韩国',
      type: 16,
      info: ''
    },
  ],

})

let { tabInfo, active } = toRefs(data);

onMounted(() => {
  initData();
})

const initData = () => {
  getSongs();
}

// 获取歌曲
let songArr = ref([]);
const getSongs = async (type = 0) => {
  await getTopSong({ type: type, limit: 10 }).then(data => {
    let listData = data.data;
    console.log("getTopSong", data);
    for (let i = 0; i <= 10; i++) {

      let list = {
        album: listData[i].album,
        artists: listData[i].artists,
        duration: listData[i].duration,
        musicId: listData[i].id,  //音乐ID
        musicName: listData[i].name
      }
      songArr.value.push(list)
    }
    console.log("songArr===>", songArr.value);
    tabInfo.value.forEach(item => {

      if (item.type == type) item.info = songArr;
      console.log(item.info);
    });
  })
}

// 改变tab
const tabsChange = (index) => {
  if (!tabInfo.value[index].info) {
    getSongs(tabInfo.value[index].type);
  }
  console.log("tabInfo===>", tabInfo.value);
}

</script>
  
<style lang='less' scoped>
:deep(.van-tabs__line) {
  z-index: 0;
}

li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 20px 0;
  padding: 0 20px;
  box-sizing: border-box;

  .music-pic {
    width: 100px;
    text-align: center;
  }

  .muisc-info {
    flex: 1;
    margin: 0 20px;

    p {
      font-size: 35px;

      span {
        font-size: 20px;
      }
    }

    .info {
      font-size: 28px;
    }
  }
}
</style>